<template>
  <view class="page">
    <Header/>
      <swiper class="swiper" 
      :indicator-dots="false" 
      :autoplay="false"
        :current="current"
        easing-function="easeInOutCubic"
        :skip-hidden-item-layout="false"
        @change="change"
        >
        <swiper-item>
					<view class="swiper-item">
            <div v-for="(_,index) in 10" :key="index" class="listItem">
                {{ index }}
            </div>
          </view>
				</swiper-item>
        <swiper-item>
					<view class="swiper-item"></view>
				</swiper-item>
			</swiper>
  </view>
</template>

<script>
import Header from './components/header'
export default {
  data() {
    return {
      current: 0
      }
  },
  created() {
    
  },
  components: {
    Header
  },
  methods: {
      changeAutoplay(e) {
          this.autoplay = !this.autoplay
      },
      intervalChange(e) {
          this.interval = e.target.value
      },
    durationChange(e) {
        this.duration = e.target.value
          
      },
    change(e) {
        const { current } = e.detail
        this.current = current
        const toLeft = current < 1
      const toRight = current > 0
      if (toRight) { 
          this.$u.route('/pagesB/shortVideo/h5mpShortVideo')
        }
      }
    }
}
</script>

<style lang="scss" scoped>

uni-page-body,html,body{  
  height: 100%;  
 }

.page {
		height: 100%;
    background-color: #000;
	}
.swiper{
  height: 100%;
  padding-top: 100upx;
}
	.swiper-item {


    height: 100%;
	}
  .listItem{
    font-size: 30upx;
    color: #fff;
    padding:30upx 50upx;
  }
</style>